<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card class="box-card">
          <map-echart ref="mapEchart"></map-echart>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-col :span="12">
          <el-card class="box-card">
            <line-echart></line-echart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <line-echart2></line-echart2>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <line-echart3></line-echart3>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <line-echart4></line-echart4>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top: 10px">
      <el-col :span="6" v-for="(o, index) in cardList" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
            <h4>{{ o.title }}</h4>
          </div>
          <Fanning-echart :listData="o.listData" :id="o.id"></Fanning-echart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>企业规模分布情况</h4>
          </div>
          <pie-echart></pie-echart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FanningEchart from "./foodSafetyModule/FanningEchart";
import mapEchart from "./foodSafetyModule/mapEchart";
import pieEchart from "./foodSafetyModule/pieEchart";
// import mapEchart from "./creditModule/mapEchart";
import radarEchart from "./foodSafetyModule/radarEchart";
import lineEchart from "./foodSafetyModule/lineEchart";
import lineEchart2 from "./foodSafetyModule/lineEchart2";
import lineEchart3 from "./foodSafetyModule/lineEchart3";
import lineEchart4 from "./foodSafetyModule/lineEchart4";
export default {
  components: {
    FanningEchart,
    mapEchart,
    radarEchart,
    lineEchart,
    lineEchart2,
    lineEchart3,
    lineEchart4,
    pieEchart
  },
  name: "User",
  data() {
    return {
      msg: "foodSafety",
      cardList: [
        {
          title: "食品安全趋势及统计分析",
          id: "F1",
          listData: [
            ["product", "1月", "2月", "3月", "4月", "5月", "6月"],
            ["食品生产主体", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["流通主体", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["餐饮服务主体", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5]
            // ["特殊食品主体", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        {
          title: "食品许可趋势及统计分析",
          id: "F2",
          // listData: [
          //   { value: 34, name: "新增数量" },
          //   { value: 11, name: "注销数量" },
          //   { value: 4, name: "吊销数量" },
          //   { value: 23, name: "过期数量" }
          // ]
          listData: [
            ["product", "1月", "2月", "3月", "4月", "5月", "6月"],
            ["新增数量", 56.5, 82.1, 76, 70.1, 66.4, 85.1],
            ["注销数量", 34, 45, 4, 54, 3, 32],
            ["吊销数量", 33, 2, 1, 3, 7, 12],
            ["过期数量", 30, 2, 0, 2, 4, 1]
          ]
        },
        {
          title: "食品分布趋势及统计分析",
          id: "F3",
          listData: [
            // { value: 63, name: "农产品" },
            // { value: 44, name: "预包装食品" },
            // { value: 96, name: "饮料" },
            // { value: 84, name: "冻品" }

            ["product", "1月", "2月", "3月", "4月", "5月", "6月"],
            ["农产品", 56.5, 34.1, 76, 70, 6, 85],
            ["预包装食品", 34, 4, 4, 54, 13, 32],
            ["饮料", 33, 12, 11, 13, 17, 22],
            ["冻品", 30, 2, 13, 45, 54, 45]
          ]
        }
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
